<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>库存管理</el-breadcrumb-item>
      <el-breadcrumb-item>库存总量</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <!--左上功能区-->
    <el-button
        type="primary"
        plain
        icon="el-icon-plus"
        size="mini"
        @click="handleAdd"
    >新增
    </el-button>
    <el-button
        type="warning"
        plain
        icon="el-icon-download"
        size="mini"
        @click="handleExport"
    >导出
    </el-button>
    <!--  查询表单-->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="85px" style="float: right;">
      <el-form-item label="类别名称" prop="categoryName">
        <el-input
            v-model="queryParams.categoryName"
            placeholder="请输入类别名称"
            clearable
            style="width: 200px"
            @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="库存名称" prop="name">
        <el-input
            v-model="queryParams.name"
            placeholder="请输库存名称"
            clearable
            style="width: 200px"
            @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>


    <el-divider></el-divider>
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          fixed
          prop="id"
          label="编号">
      </el-table-column>
      <el-table-column
          prop="categoryName"
          label="类别名称"
      >
      </el-table-column>
      <el-table-column
          prop="name"
          label="名称"
          width="240">
      </el-table-column>
      <el-table-column
          prop="number"
          label="数量"
      >
      </el-table-column>
      <el-table-column
          prop="unit"
          label="规格"
      >
      </el-table-column>
      <el-table-column
          prop="price"
          label="总价"
      >
      </el-table-column>
      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.$index,scope.row)" type="text" size="mini" icon="el-icon-edit" round>编辑
          </el-button>
          <el-popconfirm
              confirm-button-text='好的'
              cancel-button-text='不用了'
              icon="el-icon-info"
              icon-color="red"
              title="这是一段内容确定删除吗？">
            <el-button slot="reference" @click="handleDelete(scope.$index,scope.row)" type="text" icon="el-icon-delete"
                       size="mini" round>
              删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 50, 100, 500]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
      </el-pagination>
      <!--    新增表单-->
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
        <el-form :model="form" label-width="120px">
          <el-form-item label="类别名称">
            <el-select v-model="value" placeholder="请选择">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="库存名称">
            <el-input v-model="form.name" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="数量">
            <el-input v-model="form.number" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="规格（单位）">
            <el-input v-model="form.unit" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="总价（元）">
            <el-input v-model="form.price" style="width: 80%"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="insertNew">确 定</el-button>
  </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: undefined,
        categoryName: undefined
      },
      // 显示搜索条件
      dialogVisible: false,
      search: '',
      currentPage: 1,
      tableData: [],
      form: {},
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
      value: ''
    }
  },
  methods: {
    //弹出新增表单
    addNew() {
      this.dialogVisible = true
      this.form = {}
    },
    //新增数据
    insertNew() {
      this.dialogVisible = false
    },
    handleEdit() {
    },
    handleDelete() {
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //搜索按钮点击事件
    handleQuery() {
    },
    //重置按钮点击事件
    resetQuery() {
    },
    //新增按钮点击事件
    handleAdd() {
    },
    //导入按钮点击事件
    handleImport() {
    },
    //导出按钮点击事件
    handleExport() {
    },
  },

}
</script>
<style scoped>

</style>
